<template>
    <div class="app">
      <homeBanner></homeBanner>
      <div class="choosed">
        <!-- 日期切换-->
        <div class="datechooser">
          <div class="app_top">
            <div class="app_topleft">
              <h1>星期四</h1>
              <h3>2019.07.18</h3>
            </div>
            <div class="app_topright">
              <img src="../assets/images/index_fz.png" />
              <span>睡眠辅助</span>
            </div>
          </div>
          <div class="center">
            <div v-for="(item,index) in weekData" :key="index" :index="index" v-if="item.size" class="center_yh" style="color: #ffffff !important" @click="tgPercent(item)">
              <van-circle
                v-model="item.currentRate"
                :rate="item.currentRate"
                layer-color="#12275e"
                :text="item.text"
                :size="item.size"
                :color="gradientColor"
                class="center_yhtext"
              />
            </div>
          </div>
          <div class="app_bottom"></div>
        </div>
        <homeEvaluate class="evaluated"></homeEvaluate>
      </div>


      <homeAllzs class="allzsd"></homeAllzs>
      <homeSnore class="snoresd"></homeSnore>
      <homeBreathe class="breathed" :datatype="ghType" v-if="ghType"></homeBreathe>
      <homeMove class="homemoved"></homeMove>
    </div>
</template>

<script>
  import homeBanner from './jcHomechild/homeBanner'
  import homeEvaluate from './jcHomechild/homeEvaluate'
  import homeAllzs from './jcHomechild/homeAllzs'
  import homeSnore from './jcHomechild/homeSnore'
  import homeBreathe from './jcHomechild/homeBreathe'
  import homeMove from './jcHomechild/homeMove'
    export default {
     name: "jcHome",
      data(){
       return{
         ghType:[//用来判断是呼吸还是心率
           {
             type:'1',
             value:'平均心率',
            },
           {
             type:'2',
             value:'平均呼吸频率',
           }
         ],
         weekData:[
           {
             text:'日',
             currentRate:90,
           },
           {
             text:'一',
             currentRate:40,
           },
           {
             text:'二',
             currentRate:70,
           },
           {
             text:'三',
             currentRate:60,
           },
           {
             text:'四',
             currentRate:20,
           },
           {
             text:'五',
             currentRate:0,
           },
           {
             text:'六',
             currentRate:0,
           }
         ],
         gradientColor: {
           '0%': '#2085f7',
           '100%': '#1a9af1'
         }
       }
      },
      components:{
        homeBanner,//banner区域
        homeEvaluate,//评价区域
        homeAllzs,//第一张图表
        homeSnore,//打鼾次数
        homeBreathe,//心率和呼吸频率
        homeMove,//体动
      },
      created(){
        this.hqyhSize();
        this.getwekDate();
      },
      methods:{
        //rem转换px
        remToPx(rem) {
          var fontSize = document.documentElement.style.fontSize;
          return Math.floor(rem * fontSize.replace('px', ''));
        },
        hqyhSize(){
          var that=this;
          var ag=that.weekData;
          for(var i=0;i<ag.length;i++){
            that.weekData[i].size=this.remToPx(0.8);
          }
        },
        getwekDate(){
          var date = new Date();//得到日期
          console.log(date)
        },
        tgPercent(e){
          console.log(e)
        }

      }
    }
</script>

<style scoped lang="scss" type="text/css">
.app{
  width:100%;
  height:100%;
  background: #021736;
}
.center{
  width:calc(100% - 0.8rem);
  padding:0.3rem 0.4rem 0 0.4rem;
  float:left;
  height: 1rem;
  display:flex;
  display: -webkit-flex;
  -webkit-justify-content:space-between;
  justify-content: space-between;

}
.evaluated{
  float:left;
  width: 100%;
}
.choosed{
  background: url(../assets/images/index_bj.jpg)no-repeat;
  background-size:100%;
  height:7.52rem;
}
  .datechooser{
    width:100%;
    height:1rem;
    /*background:url(../assets/images/index_datechoice.jpg) no-repeat;*/
    background-size:100%;
    .app_top{
      padding:0.2rem 0.4rem;
      height:0.5rem;
      display:flex;
      display: -webkit-flex;
      -webkit-justify-content:space-between; ;
      justify-content: space-between;
      .app_topleft{
       height:0.5rem;
       width:4.06rem;
       position:relative;
        h1{
          font-size: 0.45rem;
          color:#ffffff;
          position:absolute;
          bottom: 0px;
        }
        h3{
          font-size: 0.28rem;
          color:#ffffff;
          float: left;
          font-weight: normal;
          left:1.6rem;
          position:absolute;
          bottom: 0px;
        }
      }
     .app_topright{
        height:0.5rem;
        width:2rem;
        position:relative;
        img{
          width: 0.45rem;
          height:0.45rem;
          position:absolute;
          bottom: -0.05rem;
          right:1.2rem;
        }
        span{
          color:#239bf2;
          font-size: 0.28rem;
          position:absolute;
          bottom: 0px;
          right:0px;
          width:1.2rem;

        }
     }
    }

    .allzsd,.snoresd,.breathed,.homemoved{
      width:100%;
      float:left;
    }
    .snoresd{
      width:100%;
      float:left;
    }
  }

</style>
<style>
  .allzs_ad{
    width:0.5rem;
    height:0.5rem;
    background:#255fea;
    float:right;
    border-radius:0 0.1rem 0 0.4rem ;
    color:#ffffff;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.5rem;
  }
.van-circle__text{
  color:#ffffff !important;
}
</style>
